<template>
	<div>
		<vxe-toolbar custom :refresh="{query: findList}">
			<template v-slot:buttons>
				<vxe-button icon="fa fa-plus" @click="addEdit" status="perfect">新增</vxe-button>
				<vxe-button icon="fa fa-trash-o" @click="removeSelectData" status="perfect">删除</vxe-button>
				<!-- <vxe-button icon="fa fa-save" status="perfect">保存</vxe-button>
				<vxe-button icon="fa fa-print" status="perfect" @click="printEvent">打印</vxe-button> -->
				<vxe-button icon="fa fa-download" status="perfect" @click="printSelectEvent">选中</vxe-button>
				<vxe-button icon="fa fa-upload" status="perfect" @click="exportDataEvent">导出与打印</vxe-button>
				<!--增加按钮的插槽-->
				<slot name="toolbarButton" v-if="$slots.toolbarButton"></slot>
			</template>
		</vxe-toolbar>
		<!-- height="500" -->
		<vxe-table
			id="tableMap"
			:max-height="customTableHeight"
			size="mini"
			ref="tableRef"
			resizable
			:loading="loading"
			border
			stripe
			auto-resize
			show-header-overflow
			highlight-hover-row
			export-config
			show-overflow
			highlight-current-row
			:custom-config="{storage: true}"
			:align="allAlign"
			:empty-render="{name: 'NotData'}"
			:keyboard-config="{isArrow: true}"
			:data="tableData"
			@header-cell-click="headerCellClickEvent"
			@header-cell-dblclick="headerCellDBLClickEvent"
			@header-cell-context-menu="headerCellContextMenuEvent"
			@cell-click="cellClickEvent"
			@cell-dblclick="cellDBLClickEvent"
			@cell-mouseenter="cellMouseenterEvent"
			@cell-mouseleave="cellMouseleaveEvent"
			@cell-context-menu="cellContextMenuEvent"
			@scroll="scrollEvent"
		>
			<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
			<vxe-table-column type="checkbox" width="40"></vxe-table-column>
			<!--增加列的具名插槽-->
			<slot name="tableColumns" v-if="$slots.tableColumns"></slot>

			<slot name="tableOptions" v-if="!$slots.tableOptions">
				<vxe-table-column title="操作" fixed="right" width="200">
					<template slot-scope="scope">
						<el-tag style="cursor:pointer;margin-right: 4px;" size="mini" @click="addEdit(scope.row)">
							<i class="el-icon-edit" />编辑
						</el-tag>
						<el-tag style="cursor:pointer;" size="mini" type="danger" @click="removeRow(scope.row)">
							<i class="el-icon-delete" />删除
						</el-tag>
					</template>
				</vxe-table-column>
			</slot>
		</vxe-table>
		<vxe-pager
			background
			size="small"
			:loading="loading"
			:current-page="listQuery.currentPage"
			:page-size="listQuery.pageSize"
			:total="listQuery.totalResult"
			:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
			@page-change="handlePageChange"
		></vxe-pager>
	</div>
</template>

<script>
import addEdit from '@/views/demo/addEdit'
import systemUserApi from '@/api/system/user'
export default {
	name: 'tablePage',
	props: {
		allAlign: {
			type: String,
			default: 'center'
		},
		loading: {
			type: Boolean,
			default: false
		},
		tableData: {
			//表格数据
			type: Array,
			default: () => {
				return []
			}
		},
		listQuery: {
			//表格数据
			type: Object,
			default: () => {
				return {
					totalResult: 0, //总条数
					pageCount: 1, //总页数
					pageSize: 10, //一页显示条数
					currentPage: 1 //当前页码
				}
			}
		},
		customTableHeight: {
			type: String,
			default: '60%'
		}
	},
	created() {
		//loading 用于控制进度。
		// this.loading = true
		// setTimeout(() => {
		//   this.loading = false
		// }, 3000)
		// systemUserApi.list(this.listQuery).then(res => {
		//   this.tableData = res.data || []
		//   this.loading = false
		// }).catch(() => this.loading = false);
	},
	watch: {
		allAlign: {
			//刚刚进入页面时 数据没有改变,默认undefined,后台打印  小明 # undefined
			handler: function(newVal, oldVal) {
				console.log(newVal, '#', oldVal)
				this.allAlign = newVal
			},
			deep: true
			// , 深度监听，可以监听这个对象的某个属性比如说监听 'obj.name'
			// immediate: true, //监听的数据第一次被绑定的时候就开始监听
		},
		loading: function(newVal) {
			this.loading = newVal
		},
		customTableHeight: function(newVal) {
			this.customTableHeight = newVal
		},
		tableData: {
			handler: function(newVal, oldVal) {
				console.log(newVal, '#', oldVal)
				this.tableData = newVal
			},
			deep: true
		},
		listQuery: {
			handler: function(newVal, oldVal) {
				console.log(newVal, '#', oldVal)
				this.listQuery = newVal
			},
			deep: true
		}
	},
	methods: {
		addEdit(row) {
			//insert 就是 1 ,update 就是2
			this.operationType = row ? 2 : 1
			this.$emit('addEdit', this.operationType, row)
		}, //关闭窗口对数据进行初始哈
		closeDialog() {
			this.$emit('closeDialog')
		},
		//选中删除
		removeSelectData() {
			let selectDatas = this.$refs.tableRef.getCheckboxRecords()
			if (!_.isEmpty(selectDatas)) {
				debugger;
				this.$confirm(
					'是否将勾选的数据进行删除！删除后将无法恢复，是否继续？',
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						closeOnPressEscape: false,
						closeOnClickModal: false,
						type: 'warning'
					})
					.then(() => {
						this.$emit('removeSelectData', selectDatas)
						console.log('删除成功!' + selectDatas)
					})
					.catch(() => {
						debugger;
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			}
		},
		removeRow: function(row) {
			debugger;
			this.$confirm('删除后将无法恢复，是否继续？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				closeOnPressEscape: false,
				closeOnClickModal: false,
				type: 'warning'
			}).then(() => {
					console.log('进入删除功能!')
					this.$emit('removeRow', row)
					//this.$message.success('删除成功');
					//systemUserApi.remove(row.id).then(res => {});
				}).catch(() => {
					debugger;
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		printSelectEvent: function() {
			//打印选中
			this.$refs.tableRef.print({
				data: this.$refs.tableRef.getCheckboxRecords()
			})
		},
		printEvent() {
			//打印
			console.log(this.$refs.tableRef)
			this.$refs.tableRef.print({
				sheetName: '最新系统',
				isHeader: false,
				isFooter: true,
				columnFilterMethod: column =>
					['username', 'nickName'].includes(column.property)
			})
		},
		exportDataEvent() {
			//导出与打印
			this.$refs.tableRef.openExport()
		},
		exportEventXls() {
			this.$refs.tableRef.exportData({
				filename: 'export',
				sheetName: '导出数据',
				type: 'xlsx'
			});
		},
		findList() {
			console.log('我刷新了')
			this.$emit('findList', this.listQuery)
		},
		handlePageChange({ currentPage, pageSize }) {
			this.listQuery.currentPage = currentPage
			this.listQuery.pageSize = pageSize
			this.findList()
		},
		headerCellClickEvent({ column }) {
			//console.log(`表头单元格点击${column.title}`)
			this.$emit('headerCellClickEvent', column)
		},
		headerCellDBLClickEvent({ column }) {
			//console.log(`表头单元格双击${column.title}`)
			this.$emit('headerCellDBLClickEvent', column)
		},
		headerCellContextMenuEvent({ column }) {
			//console.log(`右键列 ${column.title}`)
			// this.$emit("headerCellContextMenuEvent", column);
		},
		cellClickEvent({ column }) {
			//   console.log(`单元格点击${column.title}`)
			this.$emit('cellClickEvent', column)
		},
		cellDBLClickEvent({ column }) {
			//console.log(`单元格双击${column.title}`);
			this.$emit('cellDBLClickEvent', column)
		},
		cellMouseenterEvent({ column }) {
			//console.log(`鼠标进入单元格${column.title}`)
			this.$emit('cellMouseenterEvent', column)
		},
		cellMouseleaveEvent({ column }) {
			//console.log(`鼠标离开单元格${column.title}`)
			this.$emit('cellMouseleaveEvent', column)
		},
		cellContextMenuEvent({ row }) {
			//console.log(`右键行 ${row.name}`)
			this.$emit('cellContextMenuEvent', row)
		},
		scrollEvent({ scrollTop, scrollLeft }) {
			//console.log(`滚动事件scrollTop=${scrollTop} scrollLeft=${scrollLeft}`)
			this.$emit('scrollEvent', scrollTop, scrollLeft)
		}
	}
}
</script>

<style scoped>
.tableTest {
	margin: 0.5px;
}
</style>

